<template>
  <view class="flex align-center justify-between login-footer">
    <text class="footer-title">登录后同步购物车内的商品</text>
    <button class="footer-handle" @click="onJumpLogin">
      <LoginMask></LoginMask>
      <text>登录</text>
    </button>
  </view>
</template>

<script>
import LoginMask from './mask.vue'
import { useAuth } from '@/hooks/auth'

export default {
  name: 'LoginFooter',
  components: { LoginMask },
  setup () {
    const onJumpLogin = () => {
      useAuth()
    }

    return {
      onJumpLogin
    }
  }
}
</script>

<style lang="scss">
.login-footer {
  height: 98rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 30rpx;
  background: rgba(0, 0, 0, 0.5);

  .footer-title {
    font-size: 24rpx;
    font-family: PingFangSC, PingFangSC-Regular;
    color: #ffffff;
    line-height: 24rpx;
  }

  .footer-handle {
    width: 140rpx;
    height: 68rpx;
    line-height: 68rpx;
    background: #D82E31;
    border-radius: 40rpx;
    font-size: 28rpx;
    font-family: PingFangSC, PingFangSC-Semibold;
    font-weight: 600;
    color: #ffffff;
  }
}
</style>
